<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<link rel="stylesheet" href="../../css/style.css">
</head>

<body>
	<div class="app" id='app' style="display:none" v-show="true">
		<div class="app-content comment-list">
			<ul class="list list-kc list-comment">
				<li v-for="item of items">
					<div class="l1">
						<div class="dl">
							<img :src="imageBasePath + item.usrImg" class="oval" onerror="this.src='../../image/default_head.png'">
						</div>
						<div class="dr">
							<p class="name">{{item.usrName}}</p>
							<p class="date">{{item.createDate}}</p>
							<p class="delBtn" @click="delMyMsg(item.courseMsgId)">删除</p>
						</div>
					</div>
					<div class="l2">
						<p>{{item.content}}</p>
					</div>
					<div class="l3" @click="openLesson(item)">
						<div class="dl">
							<div class="title-img" :style="'background:url('+ imageBasePath + item.courseImg +') no-repeat center center;background-size:cover;'"></div>
						</div>
						<div class="dr">
							<p>{{item.courseName}}</p>
						</div>
					</div>
				</li>
				<div v-if="isLastPage" @click="toTop()" class="no_more" key="no_more">没有更多了，点击回到顶部</div>
			</ul>
			<transition name="fade">
				<spinner v-if="loading"></spinner>
			</transition>
		</div>
	</div>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				items: [],
				itemsYear: [],
				itemDayAndMonth: [],
				loading: false,
				loaded: false,
				pageNum: 1,
				pageSize: 10,
				isLastPage: false
			},
			mounted: function() {
				var $this = this;
				apiready = function() {
					api.parseTapmode();
					$this.init();
					$this.getList();

					onScrollToBottom(function () {
						if ($this.loaded) return;
						$this.getList()
					})

					api.setRefreshHeaderInfo({
						bgColor: '#f5f5f9',
						textColor: '#aaa',
						textDown: '下拉刷新...',
						textUp: '松开刷新...'
					}, function(ret, err) {
						$this.pageNum = 1;
						$this.loaded = false;
						$this.isLastPage = false;
						$this.getList(true)
					});
				}
			},
			methods: {
				init: function() {

				},
				getList: function(refresh) {
					var $this = this;
					if ($this.loading) return;
					$this.loading = true;
					post('/client/courseMsg/myMsg', {
						'pageNum': $this.pageNum,
						'pageSize': $this.pageSize
					}, function(ret) {
						if (refresh) {
							api.refreshHeaderLoadDone();
							$this.items = [];
						}
						$this.loading = false;
						ret.data.list.forEach(function(item) {
							$this.items.push(item)
						});
						$this.pageNum++;
						if (ret.data.isLastPage) {
							$this.loaded = true;
							$this.isLastPage = true;
							return;
						}
					});
				},
				delMyMsg: function(courseMsgId) {
					var $this = this;
					api.confirm({
						title: '提示',
						msg: '确认删除该条评论吗？',
						buttons: ['确定', '取消']
					}, function(ret, err) {
						if (ret.buttonIndex === 1) {
							post('/client/courseMsg/delMsg', {
								courseMsgId: courseMsgId
							}, function(ret) {
								if (ret.isSuccess) {
									msgUtil.toast({
										msg: ret.message
									});
									$this.pageNum = 1;
									$this.getList(true);
								}
							});
						}
					});

				},
				toTop: function() {
					api.pageUp({
						'top': true
					}, function() {})
				},
				openLesson: function(item) {
					openWin('../study/study_win', {
						courseId: item.courseId
					});
				}
			}
		});
	</script>
</body>

</html>
